import { ref, customRef } from "vue";
export const useOptimize = () => {
	/**
	 * @param data 创建时的数据
	 * @param delay 节流的事件
	 */
	const throttleRef = (data : any, delay = 300) => {
		// 创建定时器
		let timer : any = null;
		// 对 delay 进行判断，如果传递的是 null 则不需要使用 节流方案，直接返回使用 ref 创建的。
		return delay == null ? ref(data) : customRef((track, trigger) => {
			return {
				get() {
					// 收集依赖
					track();
					// 返回当前数据的值
					return data;
				},
				set(value) {
					// 判断
					if (!timer) {
						// 创建定时器
						timer = setTimeout(() => {
							// 修改数据
							data = value;
							// 派发更新
							trigger();
							// 清除定时器
							clearTimeout(timer);
							timer = null;
						}, delay);
					}
				},
			};
		});
	};
	// delay 为防抖时间
	const debounceRef = (data : any, delay = 300) => {
		// 创建定时器
		let timer : any = null;
		// 对 delay 进行判断，如果传递的是 null 则不需要使用 防抖方案，直接返回使用 ref 创建的。
		return delay == null ? ref(data) : customRef((track, trigger) => {
			return {
				get() {
					// 收集依赖
					track();
					// 返回当前数据的值
					return data;
				},
				set(value) {
					// 清除定时器
					if (timer) {
						clearTimeout(timer);
						timer = null;
					}
					// 创建定时器
					timer = setTimeout(() => {
						// 修改数据
						data = value;
						// 派发更新
						trigger();
					}, delay);
				},
			};
		});
	};

	return {
		throttleRef,
		debounceRef
	};
};